<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>示例集合</title>

    <script src="../../XbsjEarth/thirdParty/rxjs/6.5.2/rxjs.umd.min.js"></script>
    <script src="./scripts/vue.min.js"></script>

    <link href="./scripts/codemirror/codemirror.min.css" rel="stylesheet">
    <link href="./scripts/codemirror/theme/base16-dark.css" rel="stylesheet">
    <link href="./scripts/codemirror/theme/seti.min.css" rel="stylesheet">
    <link href="./scripts/codemirror/theme/base16-light.min.css" rel="stylesheet">
    <script src="./scripts/codemirror/codemirror.min.js"></script>
    <script src="./scripts/codemirror/mode/htmlmixed/htmlmixed.min.js"></script>
    <script src="./scripts/codemirror/mode/xml/xml.min.js"></script>
    <script src="./scripts/codemirror/mode/javascript/javascript.min.js"></script>
    <script src="./scripts/codemirror/vue-codemirror.js"></script>
    <script src="./scripts/pako.min.js"></script>
    <script src="./scripts/zip.js"></script>

    <script>
        Vue.use(VueCodemirror,
            /* {
                   options: { theme: 'base16-dark', ... },
                   events: ['scroll', ...]
                   } */
        );
    </script>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
        }

        .CodeMirror {
            border: 0px solid #000;
            font-size: 11pt;
            font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, monospace;
            height: 100%;
        }

        a:link {
            color: #CCC;
        }

        a:visited {
            color: #CCC;
        }

        a:hover {
            color: #CCC;
        }

        a:active {
            color: #CCC;
        }

        #exampleList {
            position: absolute;
            left: 0px;
            top: 0px;
            width: 190px;
            height: 100%;
            white-space: nowrap;
            background: #151718;
            padding: 5px;
            overflow: scroll;
        }

        #codeEditor {
            position: absolute;
            width: calc(50% - 100px);
            background: #151718;
            height: 100%;
            left: 200px;
            top: 0px;
            /* cursor: w-resize; */
        }

        #earthWin {
            position: absolute;
            width: calc(50% - 100px);
            background: #151718;
            height: 100%;
            right: 0px;
            top: 0px;
        }

        .exampleList {
            width: 0px !important;
            display: none !important;
        }

        .codeEditor {
            width: 50% !important;
            left: 0px !important;
        }

        .earthWin {
            width: 50% !important;
        }

        body .enlargecode {
            width: 100% !important;
            left: 0px !important;
            z-index: 99 !important;
        }

        body .enlargeearth {
            width: 100% !important;
            left: 0px !important;
            z-index: 99 !important;
        }

        body #vueApp .menuenlarg {
            width: calc(100% - 200px) !important;
            left: 200px !important;
            z-index: 99 !important;
        }

        /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
            background-color: #001c35;
        }

        /*定义滚动条轨道 内阴影+圆角*/
        ::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
            border-radius: 3px;
            background-color: #001c35;
        }

        /*定义滑块 内阴影+圆角*/
        ::-webkit-scrollbar-thumb {
            border-radius: 3px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
            background-color: #3f78d1;
        }

        .sclbtn {
            position: absolute;
            right: 20px;
            top: 2.5px;
            width: 25px;
            height: 25px;
            background-size: cover;
            cursor: pointer;
        }

        .enlarge {
            background-image: url("./images/enlarge.png");
        }

        .reduce {
            background-image: url("./images/reduce.png") !important;
        }

        .menu {
            position: absolute;
            left: 20px;
            top: 2.5px;
            width: 25px;
            height: 25px;
            background-size: cover;
            background-image: url("./images/menu_icon.png") !important;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="vueApp" style="position: relative; width: 100%; height: 100%; overflow: hidden; color: #CCC;">
        <div id="exampleList" :class="{'exampleList':menu===false}">
            <a href="//github.com/cesiumlab/XbsjEarthUI">
                <h2>EarthSDK示例集</h2>
            </a>
            <template v-for="group in examples">
                <h3>{{ group.title }}</h3>
                <template v-for="e in group.list">
                    <a class="elink" :href="e.url" @click.prevent="setCodeFromUrl(e.url)"
                        :title="e.title">{{ e.title }}</a><br />
                </template>
            </template>
        </div>

        <div id="codeEditor" :class="{'codeEditor':menu===false,'enlargecode':scl,'menuenlarg':menu&scl}">
            <div
                style="height: 30px; line-height: 30px; padding-left: 8px; background: #151718; color: #CCC; position: relative;">
                <span @click="changemenu" class="menu"></span>
                <input type="checkbox" v-model="autoRefresh" style="margin-left: 50px;"
                    title="代码修改后2s自动刷新右侧的三维窗口">自动运行</button>
                <button @click="apply" title="手动刷新右侧的三维窗口">手动运行</button>
                <button @click="showCodeUrl" title="修改后的代码可以通过此链接分享，但是url会比较长！">分享代码</button>
                <div
                    style="height: 30px; line-height: 30px; position: absolute; right: 70px; top: 0px; padding-right: 8px;">
                    <span>{{ title }}</span>
                </div>
                <span @click="sclcontrl" class="sclbtn enlarge" :class="{'reduce':scl}"></span>
            </div>
            <code-editor v-model="code" style="width: 100%; height: calc(100% - 30px);"></code-editor>
        </div>

        <div id="earthWin" :class="{'earthWin':menu===false,'enlargeearth':reduce}">
            <iframe ref="earthAppFrame" src="./startup-createEarth.html" frameborder="0"
                style="width:100%; height: 100%; position: relative; background: grey"></iframe>
            <span @click="reducecontrl" class="sclbtn enlarge" :class="{'reduce':reduce}"></span>
        </div>
    </div>

    <script src="./scripts/codeEditor.js"></script>
    <script src='./scripts/list.js'></script>
    <script src="./scripts/axios.min.js"></script>
    <script>
        var q = {};
        location.search.replace(/([^?&=]+)=([^&]+)/g, (_, k, v) => q[k] = v);
        if (q.url) {
            vueApp.setCodeFromUrl(q.url);
        } else if (q.code) {
            const decode = decodeURIComponent(q.code);
            const jsonStr = base64ToString(decode);
            const json = JSON.parse(jsonStr);
            vueApp.code = json.code;
        } else if (q.id) {
            const submitData = {};
            submitData.contents = true;
            submitData.ids = q.id;
            axios.get("//lab2.cesiumlab.com/api/examples/get", {
                params: submitData
            })
            .then(res => {
                if (res.status !== 200) return;
                if (res.data.status !== "ok") return;
                var data = res.data.result;
                // console.log(data);
                const code = data[0].content;
                vueApp.code = code;
            })
            .catch(function(error) {
                console.log(error);
            });
        } else {
            vueApp.setCodeFromUrl('./startup-createEarth.html');
        }
    </script>
</body>

</html>